<template>
  <view>
    <u-navbar
      title="排行榜"
      placeholder
      titleStyle="color:white"
      leftIconColor="#fff"
      auto-back
      bgColor="#FF7540"
    >
    </u-navbar>
    <view class="top_member">
      <view class="rank_user">
        <view class="l_infortaion">
          <view class="l_head">
            <image :src="myRank?myRank.avatar: BaseImgUrl + '/group/head_img.png'" alt=""></image>
          </view>
          <view class="l_infor">
            <view class="nickname">{{ myRank ? myRank.nickname : '' }}</view>
            <view class="pm" v-if="myRank.sort > 0">
              {{ type === 1 ? '总' : type === 3 ? '周' : '月' }}排名：{{ myRank ? myRank.sort : 0 }}
            </view>
            <view class="pm" v-if="myRank.sort === 0">
              {{ type === 1 ? '总' : type === 3 ? '周' : '月' }}排名：暂未上榜，请继续努力
            </view>
            <view class="pm">
              {{ type === 1 ? '总' : type === 3 ? '周' : '月' }}收益：￥{{ myRank ? myRank.amount : '0.00' }}
            </view>
          </view>
        </view>
        <!-- 有名次 -->
        <view class="r_icon" v-if="myRank.sort > 0">
          <image :src="BaseImgUrl + '/group/rank_icon.png'" alt=""></image>
          <text class="num">{{ myRank ? myRank.sort : 0 }}</text>
        </view>
        <!-- 未上榜 -->
        <view class="r_icon" v-if="myRank.sort === 0">
          <image :src="BaseImgUrl + '/group/rank_null.png'" alt=""></image>
          <text class="no_bang">未上榜</text>
        </view>
      </view>
    </view>
    <view class="detail_content">
      <view class="hot_tabs">
        <text :class="hot_rank === index?'cur':''" v-for="(item, index) in hotRank" :key="index"
              @click="handleHotRank(index)">{{ item }}
        </text>
      </view>
      <view class="my_sy">我的收益：
        <text>￥{{ myRank ? myRank.amount : '0.00' }}</text>
      </view>
      <view class="small_hot" v-for="(item, index) in rankData" :key="index">
        <view class="left_hot">
          <view class="mc_icon" v-if="index === 0">
            <image :src="BaseImgUrl + '/group/medal01.png'" alt=""></image>
          </view>
          <view class="mc_icon" v-if="index === 1">
            <image :src="BaseImgUrl + '/group/medal02.png'" alt=""></image>
          </view>
          <view class="mc_icon" v-if="index === 2">
            <image :src="BaseImgUrl + '/group/medal03.png'" alt=""></image>
          </view>
          <view class="mc_icon" v-if="index > 2">{{ index + 1 }}</view>
          <view class="head_img">
            <image :src="item.avatar" alt=""></image>
          </view>
          <view class="nickname">{{ item.nickname }}</view>
        </view>
        <view class="r_price" :class="index < 3?'cur':''">￥{{ (item.amount) }}</view>
      </view>
      <view class="more_text">{{ more_text }}</view>
    </view>
  </view>
</template>
<script setup>
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";
import {getMyRankAllAPI, getRankListAllAPI} from "../../services/makeMoney";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {BaseImgUrl} from "../../utils/lshttp";

const commonInfoStore = useCommonInfoStore()
const rankData = ref([])
const page = ref(1)
const limit = ref(50)
const _len = ref(0)
const type = ref(1)

const more_text = ref('上拉加载更多……')
const hotRank = ref(['总排行', '月排行', '周排行'])
const hot_rank = ref(0)
const myRank = ref({
  sort: 0,
  amount: '0.00',
})

onLoad(() => {
  handleRankList()
  handleMyRank()
})
onReachBottom(() => {
  if (_len < limit) {
    page.value = 1
  } else {
    page.value++
    handleRankList()
  }
})
onPullDownRefresh(() => {
  page.value = 1
  handleRankList()
})

const handleMyRank = async () => {
  const res = await getMyRankAllAPI(type.value)
  myRank.value = res.result
}
const handleRankList = async () => {
  const res = await getRankListAllAPI(limit.value, page.value, type.value)
  _len.value = res.result.length
  if (page.value === 1) {
    rankData.value = res.result
  } else {
    rankData.value = [...rankData.value, ...res.result]
  }
  if (_len.value === 0) {
    more_text.value = '暂无数据~'
    return
  }
  if (_len.value < limit.value) {
    more_text.value = '没有更多数据~'
  } else {
    more_text.value = '上拉加载更多……'
  }
}
const handleHotRank = (index) => {
  if (index === 0) {
    type.value = 1
  } else if (index === 1) {
    type.value = 2
  } else {
    type.value = 3
  }
  page.value = 1
  rankData.value = []
  handleRankList()
  handleMyRank()
  hot_rank.value = index
}
</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FC5722, #FF7540, #FF7540, #FF7540);
  color: rgb(255, 117, 64);
}

</style>
<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.top_member {
  width: 100%;
  height: 470rpx;
  background: url('https://lsz.lszbg.com/imgs/group/top_bg.png') no-repeat top center / 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 30rpx;

  .member_title {
    font-size: 44rpx;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;

    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 10rpx;
      left: 0;
      width: 28rpx;
      height: 49rpx;
      background: url('https://lsz.lszbg.com/imgs/group/return_icon.png') no-repeat top center / 100%;
    }
  }

  .rank_user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 70rpx;

    .l_infortaion {
      display: flex;
      align-items: center;

      .l_head {
        width: 108rpx;
        height: 108rpx;
        background-color: #fff;
        border-radius: 50%;
        box-sizing: border-box;
        padding: 2rpx;
        overflow: hidden;
        margin-right: 16rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .l_infor {
        .nickname {
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
        }

        .pm {
          font-size: 24rpx;
          color: #fff;
          margin-top: 12rpx;
        }
      }
    }

    .r_icon {
      width: 90rpx;
      height: 120rpx;
      position: relative;

      img {
        position: absolute;
        z-index: 1;
      }

      text {
        font-weight: bold;
        color: #FFFFFF;
        -webkit-background-clip: text;
        font-size: 20px;
        // -webkit-text-fill-color: transparent;font-size: 36px;
        position: absolute;
        z-index: 22;
        bottom: 20rpx;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
      }

      .no_bang {
        font-size: 20rpx;
        color: #FC5722;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30rpx;
        margin: auto;
        text-align: center;
      }
    }
  }
}

.detail_content {
  background: linear-gradient(179deg, #FFFFFF 0%, #F1F1F1 100%);
  border-radius: 50rpx 50rpx 0 0;
  margin-top: -218rpx;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 40rpx 30rpx;

  .day_tabs {
    border-bottom: 1rpx solid #E6E6E6;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 20rpx;

    text {
      position: relative;
      margin-right: 92rpx;
      font-size: 36rpx;
      color: #888;

      &:after {
        content: '';
        display: inline-block;
        width: 144rpx;
        height: 8rpx;
        background-color: #fff;
        border-radius: 20rpx;
        position: absolute;
        bottom: -20rpx;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.cur {
        color: #FC5722;

        &:after {
          background: linear-gradient(90deg, #FC754A 0%, #FDC434 100%);
        }
      }
    }
  }
}

.more_text {
  font-size: 28rpx;
  color: #B1B1B1;
  text-align: center;
  margin-top: 56rpx;
}

.small_group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  border-bottom: 2rpx dashed #DCDCDC;
  box-sizing: border-box;
  padding-bottom: 40rpx;

  .l_user {
    display: flex;
    align-items: center;
    width: 75%;

    .l_img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;
    }

    .l_infor {
      width: 70%;

      .name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .fisih_text {
        font-size: 24rpx;
        color: #888;
        margin-top: 5rpx;
      }

      &.z_infor {
        width: 70%;
      }
    }

    &.z_user {
      width: 50%;
    }
  }

  .fisih_text {
    font-size: 24rpx;
    color: #888;
    margin-top: 5rpx;
  }

  .r_price {
    text-align: right;

    .price {
      font-size: 28rpx;
      color: #FC4106;
      font-weight: bold;
    }

    .p_text {
      font-size: 24rpx;
      color: #888;
    }
  }
}

.g_name {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .l_text {
    font-size: 26rpx;
    color: #888;

    text {
      font-size: 28rpx;
      color: #FC754A;
      font-weight: bold;
      margin: 0 10rpx;
    }
  }

  .r_text {
    font-size: 26rpx;
    color: #999;
  }
}

.small_group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50rpx;

  .l_user {
    display: flex;
    align-items: center;
    width: 75%;

    .l_img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;
    }

    .l_infor {
      width: 70%;

      .name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .fisih_text {
        font-size: 24rpx;
        color: #888;
        margin-top: 5rpx;
      }
    }
  }

  .r_price {
    text-align: right;

    .price {
      font-size: 28rpx;
      color: #FC4106;
      font-weight: bold;
    }

    .p_text {
      font-size: 24rpx;
      color: #888;
    }
  }
}

.hot_tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 32rpx;
  color: #333;
  border-bottom: 2rpx solid #ECECEC;

  text {
    box-sizing: border-box;
    padding-bottom: 20rpx;

    &.cur {
      border-bottom: 2rpx solid #FC4106;
      margin-bottom: -2rpx;
      font-size: 32rpx;
      color: #FC4106;
    }
  }
}

.my_sy {
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  margin-top: 34rpx;

  text {
    font-size: 32rpx;
    color: #FC5722;
    font-weight: bold;
  }
}

.small_hot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50rpx;

  .left_hot {
    display: flex;
    width: 80%;
    align-items: center;

    .mc_icon {
      width: 48rpx;
      height: 58rpx;
      text-align: center;
      font-size: 40rpx;
      color: #888;
    }

    .head_img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      margin: 0 15rpx 0 38rpx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }

      .t_icon {
        position: absolute;
        bottom: -10rpx;
        right: 0;
        width: 32rpx;
        height: 32rpx;
      }
    }

    .nickname {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      width: 60%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .r_price {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;

    &.cur {
      color: #FC4106;
    }
  }
}

.more_rank {
  font-size: 28rpx;
  color: #FC4106;
  text-align: center;
  box-sizing: border-box;
  padding-top: 30rpx;
  border-top: 2px dashed #E6E6E6;
  margin-top: 30rpx;
  position: relative;

  text {
    margin-left: 10rpx;
  }

  &:before {
    content: '';
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    background-color: #F1F1F1;
    border-radius: 50%;
    position: absolute;
    left: -35rpx;
    top: -17rpx;
  }

  &:after {
    content: '';
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    background-color: #F1F1F1;
    border-radius: 50%;
    position: absolute;
    right: -35rpx;
    top: -17rpx;
  }
}
</style>
